<template>
  <div class="bigData">
    <header>
      <headerPage @getMap="getMap"/>
    </header>
    <section>
      <div class="content_left">
        <div class="left_top">
          <parkMonitor/>
        </div>
        <div class="left_middle">
          <equipment/>
        </div>
        <div class="left_bottom">
          <proportion/>
          <!-- <ring/> -->
        </div>
      </div>
      <div class="content_middle">
        <!-- <ceshi/> -->
        <contentMiddle :map="mapName" :key="timer"/>
      </div>
      <div class="content_right">
        <div class="right_top">
          <weather/>
        </div>
        <div class="right_bottom">
          <carIn/>
        </div>
      </div>
      <div class="content_bottom">
        <contentBottom/>
      </div>
    </section>
  </div>
</template>
<script>
  import axios from 'axios'
  import qs from 'qs'
  let echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/line');
  require('echarts/lib/chart/bar');
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');
  import headerPage from './components/headerPage.vue'
  import parkMonitor from './components/parkMonitor.vue'
  import equipment from './components/equipment.vue'
  import proportion from './components/proportion.vue'
  import weather from './components/weather.vue'
  import carIn from './components/carIn.vue'
  import contentMiddle from './components/contentMiddle.vue'
  import contentBottom from './components/contentBottom.vue'
  import ceshi from './components/ceshi.vue'
  import ring from './components/ring.vue'

  export default {
    name: 'bigData',
    components: {
      headerPage,
      parkMonitor,
      equipment,
      proportion,
      weather,
      carIn,
      contentMiddle,
      contentBottom,
      ceshi,
      ring
    },
    data() {
      return {
        mapName: '',
        timer: '',

      }
    },
    mounted() {

    },
    methods: {
      getMap(msg) {
        this.mapName = msg;
        this.timer = new Date().getTime()
      }
    }
  }
</script>
<style scoped>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    height: 100%;
    width: 100%;
  }
  .bigData {
    height: 100%;
    width: 100%;
    background-image: url(../../assets/background_imge.png);
    background-position: center;
  }
  header {
    height: 15.65%;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    align-items: flex-end;
  }
  /* 内容区 */
  section {
    height: 84.35%;
    width: 97.19%;
    margin-left: 0.89%;
    position: relative;
    overflow: hidden;
  }
  /* 左边栏 */
  .content_left {
    display: inline-block;
    width: 23.63%;
    height: 100%;
  }
  .left_top {
    height: 30.08%;
    background-image: url(../../assets/left.png);
    background-size: 100% 100%;
    position: relative;
  }
  .left_middle {
    margin-top: 4px;
    height: 28.87%;
    background-image: url(../../assets/left.png);
    background-size: 100% 100%;
    position: relative;
    letter-spacing:2px;
  }
  .left_bottom {
    margin-top: 10px;
    height: 28.22%;
    background-image: url(../../assets/left.png);
    background-size: 100% 100%;
    position: relative;
  }
  /* 中间栏 */
  .content_middle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% ,-50%);
    width: 51%;
    height: 100%;
  }
  /* 右边栏 */
  .content_right {
    width: 24.44%;
    height: 100%;
    float: right;
  }
  .right_top {
    height: 26.13%;
    background-image: url(../../assets/right_top.png);
    background-size: 100% 100%;
    position: relative;
  }
  .right_bottom {
    height: 64.1%;
    background-image: url(../../assets/right_bottom.png);
    background-size: 100% 100%;
    margin-top: 8px;
    position: relative;
  }
  /* 底部 */
  .content_bottom {
    width: 67.68%;
    height: 500px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -380px;
    background-image: url(../../assets/content_bottom_background.png);
    background-size: 100%;
  }

</style>
